<template>
	<view class="zuipageWrap">
		<view class="J_conditionWrap uni-flex uni-row">
			<view class="text des">库房：</view>
			<view class="text inputwrap zimpo" style="flex: 1;">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<picker class="zpicker" @change="bindPickerChangeD" :value="drugStorageIndex" :range="drugStorageList" range-key="name">
						<view class="uni-input uni-ellipsis zinput">{{drugStorageList[drugStorageIndex].name}}</view>
					</picker>
				</view>
			</view>
		</view>		
		<view class="J_top">
			<uniIcon type="search" size="26" class="J_searchIcon"></uniIcon>
			<view class="J_search">
				<input class="uni-input" confirm-type="search" placeholder="请输入药品信息"
					v-model="invoiceId" @input="inputEvent" @confirm="inputConfirm" :maxlength="maxlength" :focus="triggerFocus1" />
			</view>
			<uniIcon type="scan" size="26" class="J_scanIcon" @click="scanCode"></uniIcon>
		</view>
		<view class="J_top">
			<uniIcon type="search" size="26" class="J_searchIcon"></uniIcon>
			<view class="J_search">
				<input class="uni-input" confirm-type="search" placeholder="请输入货位码"
					v-model="invoiceIdS" :maxlength="maxlength" />
			</view>
			<uniIcon type="scan" size="26" class="J_scanIcon" @click="scanCodeS"></uniIcon>
		</view>
		
		
		<view class="J_content" v-if="tableData.length">
			<view class="J_card" :class="{isSlide: item.slideHide}" v-for="(item, index) in tableData" :key="index">
				<view class="uni-flex uni-row" @click="zslide(item, index)">
					<view class="J_tit">
						<view class="J_cicon"></view>
						{{item.name}}
						<uniIcon type="arrowdown" size="20" class="J_slideIcon" v-if="!item.slideHide"></uniIcon>
						<uniIcon type="arrowup" size="20" class="J_slideIcon" v-if="item.slideHide"></uniIcon>
					</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">选中：</view>
					<view class="J_des">
						<switch :checked="item.switchCheck" @change="switchChange(item, $event)" />
					</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">货位：</view>
					<view class="J_des">{{item.locatno}}</view>
				</view>
				
				<view class="uni-flex uni-row">
					<view class="J_label">架位：</view>
					<view class="J_des">{{item.jwcode}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">库存数量：</view>
					<view class="J_des">{{item.num}}</view>
				</view>
				<view class="uni-flex uni-row J_editWrap" @click="changeNumS(item, index)">
					<view class="J_label">上架数量：</view>
					<view class="J_des">
						{{item.smnum}}
						<uniIcon type="compose" size="26" class="J_editIcon"></uniIcon>
					</view>
				</view>
				<view class="uni-flex uni-row" :class="{no_border: !item.slideHide}">
					<view class="J_label">批号：</view>
					<view class="J_des">{{item.batchnumber}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
					<view class="J_label">有效期：</view>
					<view class="J_des">{{item.validity}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
					<view class="J_label">生产日期：</view>
					<view class="J_des">{{item.productdate}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
					<view class="J_label">规格：</view>
					<view class="J_des">{{item.specifications}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
					<view class="J_label">单位：</view>
					<view class="J_des">{{item.unit}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
					<view class="J_label">厂商：</view>
					<view class="J_des">{{item.factory}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
					<view class="J_label">单价：</view>
					<view class="J_des">{{item.unitprice | priceFormat(2,'￥',true)}}</view>
				</view>
			</view>
		</view>
		
		<view class="uni-btn-v J_foot">
			<button type="default" class="zbtn J_cancel" @click="cancle">取消</button>
			<button class="zbtn J_sub" @click="save">提交</button>
		</view>
		
		<uni-popup :show="zpopupFlag" position="middle" mode="middle" @hidePopup="hidezpop">
			<view class="zpopupWrap uni-tip">
				<view class="uni-tip-title">医内物流</view>
				<view class="uni-tip-subtit">请输入上架数量</view>
				<view class="uni-tip-content">
					<view class="J_inputWrap">
						<input class="uni-input" type="number" v-model="invoiceId_temp" :maxlength="maxlength" :focus="triggerFocus_temp" />
					</view>
				</view>
				<view class="uni-tip-group-button">
					<view class="uni-tip-button" @click="hidezpop">取消</view>
					<view class="uni-tip-button" @click="surezpop">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>

import uniIcon from "@/components/uni-icon/uni-icon.vue";
import uniPopup from "@/components/uni-popup/uni-popup.vue";
import {zDrugInByCode, zDrugInSave, zDrugStorageList} from '@/util/api';
import {
	mapState,mapGetters,mapMutations,mapActions
} from 'vuex'
export default {
	components: {uniIcon, uniPopup},
	data() {
		return {
			invoiceId: '',
			maxlength: 20,
			tableData: [],
			tableDataS: [],
			batchnumberIndex: 0,
			batchnumberList: [],
			rightDrawerVisible: false,
			triggerFocus1: false,
			medName: '',
			batchNo: '',
			drugStorageIndex: 0,
			drugStorageList: [
				{
					id: '',
					name: '药库'
				}
			],
			invoiceIdS: '',
			curItem_temp: null,
			triggerFocus_temp: false,
			zpopupFlag: false,
			invoiceId_temp: ''
		}
	},
	computed: {
		
	},
	onUnload() {
		uni.$off('zCategoryCode');
	},
	onLoad(e) {
		/* this.invoiceId = '12345678';
		this.fetchInvoice(); */
		let _that = this;
		uni.$on('zCategoryCode',function(data){
			if(data)
				_that.fetchInvoice();
		})
		this.fetchAllData();
	},
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: '/pages/invoice/list'
		});
	},
	methods: {
		async fetchAllData () {
			let res2 = await zDrugStorageList();
			res2 = this.zutil.formatAxiosData(res2);
			if(res2.status == 0){
				this.drugStorageList = res2.data;
			}else{
				this.zutil.ztip(res2.message || "获取药库列表失败！");
			}
		},
		async fetchInvoice () {
			this.triggerFocus1 = false;
			uni.hideKeyboard();
			let tpl_param = {
        invoiceId: this.invoiceId,
				drugStorageid: this.drugStorageList[this.drugStorageIndex].id,
				locatno:this.invoiceIdS
      }
			uni.showLoading({title: '加载中', mask: true});
			let res = await zDrugInByCode(tpl_param);
      res = this.zutil.formatAxiosData(res);
			uni.hideLoading();
			if(res.status == 0){
				if(res.data.length){
					res.data.forEach(v=>{
						v.switchCheck = true;
					})
					this.tableData = res.data;
				}else{
					this.zutil.ztip(res.description || "未获取到药品信息");
					this.zutil.zuiShaker();
					this.invoiceId = '';
					this.triggerFocus1 = true;
				}
			}else if(res.status == 2){
				this.zutil.zconfirm("类别码未对照，是否进入对照页面？", (type)=>{
					if(type){
						// 确定
						let attr = {
							id: this.invoiceId,
							type: 2
						}
						uni.setStorageSync('medCheckInfo', JSON.stringify(attr));
						uni.navigateTo({
							url: '/pages/categorycode/index'
						});
					}else{
						// 取消
					}
				});
			}else{
				this.zutil.ztip(res.description);
				this.zutil.zuiShaker();
			}
		},
		inputEvent (e) {
			/* let _val = e.detail.value;
			if(_val.length == this.maxlength)
				this.fetchInvoice(); */
		},
		inputConfirm (e) {
			let _val = e.detail.value;
			// if(_val.length == this.maxlength)
				this.fetchInvoice();
		},
		cancle () {
			this.invoiceId = '';
			this.invoiceIdS = '';
			this.tableData = [];
			this.tableDataS = [];
			this.triggerFocus1 = false;
			setTimeout(()=>{
				this.triggerFocus1 = true;
			}, 50)
		},
		save () {
			if(!this.invoiceIdS){
				this.zutil.ztip("请输入货位码");
				return false;
			}
			if(!this.tableData.length){
				this.zutil.ztip("请先查询药品");
				return false;
			}
			this.tableData.forEach(v=>{
				if(v.switchCheck){
					let attr = {
						id: v.id,
						num:　v.num,
						smnum: v.smnum
					}
					this.tableDataS.push(attr);
				}
			})
			if(!this.tableDataS.length){
				this.zutil.ztip("请至少选中一个上架");
				return false;
			}
			this.zutil.zconfirm("是否确认上架该批药品？", (type)=>{
				if(type){
					// 确定
					this.saveS();
				}else{
					// 取消
				}
			});
		},
		async saveS () {
		//	this.zutil.zalert('=========');
			let tpl_param = {
				locatno:this.invoiceIdS,
				drugStorageid: this.drugStorageList[this.drugStorageIndex].id,
				list: this.tableDataS
			}
			//this.zutil.zalert(JSON.stringify(tpl_param));
			uni.showLoading({title: '加载中', mask: true});
			let res = await zDrugInSave(tpl_param);
			res = this.zutil.formatAxiosData(res);
			uni.hideLoading();
			if(res.status == 0){
				this.zutil.ztip(res.description || "药品上架成功");
				this.cancle();
			}else{
				this.zutil.zalert(res.description || "药品上架失败！");
				this.zutil.zuiShaker();
				
			}
		},
		zslide (item) {
			let slideFlag = item.slideHide;
			this.$set(item, 'slideHide', !slideFlag);
		},
		scanCode () {
			var _that = this;
			uni.scanCode({
				success: function (res) {
					_that.cancle();
					let cres = res.result;
					_that.invoiceId = cres;
					_that.fetchInvoice();
				},
				fail: function (res) {}
			})
		},
		scanCodeS () {
			var _that = this;
			uni.scanCode({
				success: function (res) {
					let cres = res.result;
					_that.invoiceIdS = cres;
				},
				fail: function (res) {}
			})
		},
		changeNumS (item, index) {
			this.curItem_temp = item;
			this.zpopupFlag = true;
			this.triggerFocus_temp = true;
			return false;
			// #ifdef APP-PLUS
			let _that = this;
			plus.nativeUI.prompt("请输入上架数量: ", function(e){
				if(e.index==0){
					let _val = parseInt(e.value, 10);
					if(_val){
						item.smnum = _val;
					}
				}
			}, "医内物流", item.smnum, ["确定","取消"]);
			// #endif
		},
		bindPickerChangeD: function(e) {
			this.drugStorageIndex = e.target.value;
		},
		switchChange (item, e) {
			item.switchCheck = e.target.value;
		},
		hidezpop () {
			this.invoiceId_temp = '';
			this.zpopupFlag = false;
			this.triggerFocus_temp = false;
		},
		surezpop () {
			let val = parseFloat(this.invoiceId_temp) || 0;
			this.curItem_temp.smnum = val?val.toFixed(4):0;
			this.hidezpop();
		}
	},
	filters:{
		//价格过滤器
		// arg表示原始参数,num表示小数点位,默认保留两位,symbol表示符号,spilt是否进行逗号分隔【true，false】
		priceFormat:function (arg,num=0,symbol,spilt=false) {
			/**
			 * 默认数字: {{number|priceFormat()}}
				保留两位小数: {{number|priceFormat(2)}}
				保留三位小数: {{number|priceFormat(3)}}
				添加￥符号并保留两位: {{number|priceFormat(2,'￥')}}
				添加$符号并保留三位: {{number|priceFormat(3,'$')}}
				添加千分号符号: {{number|priceFormat(0,'',true)}}
				添加千分号符号并保留两位: {{number|priceFormat(2,'',true)}}
				添加￥和千分号符号并保留两位: {{number|priceFormat(2,'￥',true)}}
			 **/
			arg=Number(arg).toFixed(num);
			if(spilt==true){
				if (arg.indexOf('.') == -1) {
					arg=arg.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				}else{
					var parts = arg.split(".");
					parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
					arg=parts.join(".");
				}
			}
			if(symbol){
				arg=symbol+arg;
			}
			return arg;
		},
	}
}
</script>

<style scoped lang="scss">
.zuipageWrap {
	background: #F5F5F5;
	height: 100%;
	
	.J_top {
		position: relative;
		padding: 20upx;
		background: #fff;
		
		.J_searchIcon {
			position: absolute;
	    left: 46upx;
	    top: 34upx;
	    z-index: 99;
		}
		.J_search {
			width: 100%;
			height: 80upx;
			display: flex;  
	    align-items: center;
			
			.uni-input {
				height: 80upx;
				line-height: 80upx;
				min-height: 80upx;
				padding: 0 24upx 0 88upx;
				border: 1px solid #ddd;
				border-radius: 40upx;
			}
		}
		.J_scanIcon {
			position: absolute;
			right: 36upx;
			top: 34upx;
			z-index: 99;
			width: 80upx;
			text-align: center;
		}
	}
	
	.J_content {
		padding: 20upx 0 60px;
		background: #F5F5F5;
		.J_card {
			border-top: 2upx solid #ddd;
			border-bottom: 2upx solid #ddd;
			height: auto;
			background: #fff;
			padding: 0 32upx;
			color: #3C3C3C;
			margin-bottom: 20upx;
			overflow: hidden;
			
			&:last-child {
				margin-bottom: 0;
			}
	
			.uni-row {
				border-bottom: 2upx solid #e5e5e5;
				padding: 18upx 0;
				&.no_border {
					border-bottom: 0;
				}
				&:first-child {
					padding: 28upx 0;
				}
				&:last-child {
					border-bottom: 0;
				}
				&.isSlide {
					display: none!important;
				}
				.J_tit {
					height: 44upx;
					line-height: 44upx;
					font-size: 30upx;
					position: relative;
					padding-left: 32upx;
					font-weight: bold;
					overflow: hidden;
					width: 100%;
					.J_cicon {
						position: absolute;
						left: 0;
						top: 0;
						width:12upx;
						height: 44upx;
						background: #FFC12E;
						display: block;
					}
					.J_slideIcon {
						position: absolute;
						right: 0;
						top: 3px;
					}
				}
				.J_label {
					width: 184upx;
				}
				.J_des {
					flex: 1;
					position: relative;
					text-align: right;
					.uni-input {
						padding: 0 56upx 0 24upx;
					}
					.J_slideIcon {
						position: absolute;
						right: 0;
						top: 3px;
					}
				}
				
				&.J_titWrap {
					padding: 0;
					align-items: center;
					.J_tit {
						margin: 28upx 0;
					}
					.J_searchBtn {
						width: 150upx;
						height: 70upx;
						line-height: 70upx;
						padding: 0;
					}
				}
				&.J_editWrap {
					position: relative;
					padding-right: 52upx;
					border-bottom: 2upx solid #ffb200;
					.J_editIcon {
						position: absolute;
						right: -52upx;
						top: 0;
						width: 40upx;
					}
				}
			}
		}
	}
	
	.uni-btn-v {
		display: flex;
		justify-content: center;
		&.J_foot {
			position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
			background: #fff;
	    box-shadow: 0px 0px 20upx rgba(0,0,0,0.2);
			padding: 0;
		}
		.zbtn {
			width: 35%;
			font-size: 32upx;
	    display: block;
	    border-radius: 0;
	    margin: 0;
	    height: 100upx;
	    line-height: 100upx;
			background: #fff;
			&:after {
				width: 0;
				height: 0;
			}
		}
		.J_cancel {
			color: #000;
		}
		.J_sub {
			background: #018DEE;
	    color: #fff;
			flex: 1;
		}
	}
}
.J_conditionWrap {
	align-items: center;
	background: #fff;
	margin-bottom: 20upx;
	padding-left: 20upx;
	.zpicker {
		width: 100%;
    height: 30px;
    line-height: 30px;
		
		.zinput {
			padding: 0;
			height: 30px;
			line-height: 30px;
		}
	}
}
/**
 * 侧边栏
 **/
.zuiDrawer {
	.zinput {
		div {
			width: 100%;
			padding: 0 10px;
			.input-placeholder {
				font-size: 12px;
			}
		}
	}
	.section_gap {
		margin-bottom: 40upx;
		.section__title {
			font-size: 34upx;
			margin-bottom: 20upx;
			color: #000;
			position: relative;
			padding-left: 20upx;
			
			&:before {
				position: absolute;
				left: 0;
				top: 12upx;
				content: '';
				width: 6upx;
				background: #e64340;
				height: 60%;
			}
		}
		.section_con {
			margin-bottom: 20upx;
			display: flex;
			.zsplit {
				height: 64upx;
				line-height: 64upx;
				text-align: center;
				width: 80upx;
				font-size: 40upx;
				font-weight: normal;
			}
			.zinput {
				display: inline-block;
				width: 100%;
				border: 1px solid #F6F6F6;
				background: #F6F6F6;
				border-radius: 60upx;
				height: 64upx;
				line-height: 64upx;
				text-align: center;
				padding: 0;
				overflow: hidden;
				div {
					width: 100%;
					text-align: center;
					input {
						width: 90%;
						text-align: center;
					}
				}
			}
			.J_tagWrap {
				align-items: center;
				justify-content: space-around;
				width: 100%;
				.J_tag {
					padding: 0 16upx;
					height: 64upx;
					line-height: 64upx;
					width: 100%;
					background: #f6f6f6;
					color: #333;
					text-align: center;
					border-radius: 60upx;
					margin-left: 20upx;
					border: 2upx solid #F1F1F1;
					
					&.zcheck {
						background: #FEF4F3;
						color: #FF0000;
						border: 2upx solid #FF0000;
					}
					
					&:first-child {
						margin-left: 0;
					}
				}
			}
			.zpicker {
				width: 100%;
			}
		}
	}
	.btn-area {
		position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
		height: 92upx;
		.zbtn {
			border: 0;
			border-radius: 0;
			display: inline-block;
			&:after {
				width: 0;
				height: 0;
			}
			&.J_sub {
				width: 65%;
			}
			&.J_reset {
				width: 35%;
			}
		}
	}
}
</style>
